<template>
  <item-group v-if="items.length > 0" style="margin-bottom: 5px;" class="cateGrop">
    <div v-for="(item, i) in items" :key="i" @click="onItemClick(item)" class="cate">
      <img :src="item.thumb" alt="分类图" width="50px">
      <div class="subject_text">
        <b>{{item.name || item.advname}}</b>
      </div>
    </div>
  </item-group>
</template>
<script>
import ItemGroup from "@/vue/components/item-group/";
import { SHOP_SUBJECT, SHOP_ICONADVERT } from "@/api/shop";

export default {
  name: "shop-subject",

  data() {
    return {
      centerId: this.getUser().centreId,
      items: []
    };
  },

  computed: {
    itemPadding() {
      const clientW =
        document.body.clientWidth || document.documentElement.clientWidth;
      const itemWidth = 50;
      const count = this.items.length;
      let padding = 10;

      if (itemWidth * count < clientW) {
        padding = (clientW - itemWidth * count) / count / 2;
      }
      return padding;
    }
  },

  created() {
    //5.24
    this.$reqGet(SHOP_ICONADVERT, { centerid: this.centerId }).then(res => {
      //数据请求成功
      if (res.data.success) {
        if (res.data.data.length == 0) {
          this.$reqGet(SHOP_SUBJECT, { type: 4, centerid: this.centerId }).then(
            res => {
              this.items = res.data.data.filter(item => item.parentId !== 0);
            }
          );
        } else {
          this.items = res.data.data;
        }
      }
      //数据请求失败
      else {
        this.$reqGet(SHOP_SUBJECT, { type: 4, centerid: this.centerId }).then(
          res => {
            this.items = res.data.data.filter(item => item.parentId !== 0);
          }
        );
      }
    });
  },

  methods: {
    onItemClick(item) {
      if (item.link) {
        //临时使用描述当作跳转链接使用
        location.href = item.link;
      } else {
        this.$router.push({
          name: "list",
          query: { itemClass: item.id, category: item.name }
        });
      }
    }
  },

  components: {
    [ItemGroup.name]: ItemGroup
  }
};
</script>

<style lang="scss" scoped>
.cate {
  display: inline-block;
  width: 20%;
  text-align: center;
  padding: 10px 0 0 0;
  box-sizing: border-box;
}
.subject_info {
  padding: 0 10px;
}

.subject_text {
  text-align: center;
  font-size: 12px;
}
</style>
<style lang="scss">
.cateGrop {
  .item_scroll_wrap {
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .item_scroll_box {
    padding: 0 !important;
    padding-bottom: 10px !important;
  }
}
</style>
